<template>
  <view class="expert-container">
    <!-- 顶部搜索 -->
    <view class="search-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input 
          type="text"
          v-model="keyword"
          placeholder="搜索专家姓名/科室/疾病"
          @input="onSearch"
        />
      </view>
      <view class="filter-btn" @tap="showFilter">
        <text class="iconfont icon-filter"></text>
        筛选
      </view>
    </view>
    
    <!-- 科室分类 -->
    <scroll-view 
      scroll-x 
      class="department-bar"
      :show-scrollbar="false"
    >
      <view 
        class="department-item"
        v-for="(item, index) in departments"
        :key="index"
        :class="{ active: currentDepartment === item.id }"
        @tap="selectDepartment(item)"
      >
        <text>{{ item.name }}</text>
      </view>
    </scroll-view>
    
    <!-- 专家列表 -->
    <scroll-view 
      scroll-y 
      class="expert-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <view 
        class="expert-item"
        v-for="(item, index) in experts"
        :key="index"
        @tap="viewDoctor(item)"
      >
        <image :src="item.avatar" mode="aspectFill" class="avatar" />
        <view class="info">
          <view class="basic">
            <view class="name-title">
              <text class="name">{{ item.name }}</text>
              <text class="title">{{ item.title }}</text>
            </view>
            <view class="tags">
              <text v-for="(tag, idx) in item.tags" :key="idx">{{ tag }}</text>
            </view>
          </view>
          <view class="hospital">{{ item.hospital }}</view>
          <view class="specialty">
            <text class="label">擅长：</text>
            <text class="content">{{ item.specialty }}</text>
          </view>
          <view class="schedule" v-if="item.schedule">
            <view class="time">
              <text class="date">{{ item.schedule.date }}</text>
              <text class="period">{{ item.schedule.period }}</text>
            </view>
            <view class="action">
              <text class="price">¥{{ item.schedule.price }}</text>
              <text class="status" :class="{ full: !item.schedule.available }">
                {{ item.schedule.available ? '可预约' : '约满' }}
              </text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <uni-load-more 
        :status="loadMoreStatus"
        :content-text="{
          contentdown: '上拉加载更多',
          contentrefresh: '加载中...',
          contentnomore: '没有更多了'
        }"
      />
    </scroll-view>
    
    <!-- 筛选抽屉 -->
    <uni-drawer ref="filterDrawer" mode="right">
      <view class="filter-drawer">
        <view class="drawer-header">
          <text class="title">筛选条件</text>
          <text class="reset" @tap="resetFilter">重置</text>
        </view>
        
        <!-- 职称 -->
        <view class="filter-section">
          <text class="section-title">职称</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in titles"
              :key="index"
              :class="{ active: filter.title === item.value }"
              @tap="selectTitle(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 医院 -->
        <view class="filter-section">
          <text class="section-title">医院</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in hospitals"
              :key="index"
              :class="{ active: filter.hospital === item.value }"
              @tap="selectHospital(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 问诊方式 -->
        <view class="filter-section">
          <text class="section-title">问诊方式</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in consultTypes"
              :key="index"
              :class="{ active: filter.consultType === item.value }"
              @tap="selectConsultType(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 排序方式 -->
        <view class="filter-section">
          <text class="section-title">排序方式</text>
          <view class="sort-list">
            <view 
              class="sort-item"
              v-for="(item, index) in sortOptions"
              :key="index"
              :class="{ active: filter.sort === item.value }"
              @tap="selectSort(item.value)"
            >
              <text>{{ item.label }}</text>
              <text class="iconfont icon-check"></text>
            </view>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="drawer-footer">
          <button 
            class="confirm-btn primary-btn"
            @tap="applyFilter"
          >确定</button>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 搜索关键词
const keyword = ref('')

// 当前科室
const currentDepartment = ref(0)

// 科室列表
const departments = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '内科' },
  { id: 2, name: '外科' },
  { id: 3, name: '妇产科' },
  { id: 4, name: '儿科' },
  { id: 5, name: '中医科' }
])

// 专家列表
const experts = ref([
  {
    id: 1,
    name: '张医生',
    title: '主任医师',
    avatar: '/static/doctor/expert1.jpg',
    hospital: '澳门镜湖医院',
    tags: ['专家门诊', '视频问诊'],
    specialty: '冠心病、高血压、心律失常等心血管疾病',
    schedule: {
      date: '今天',
      period: '上午 9:00-11:30',
      price: 500,
      available: true
    }
  },
  {
    id: 2,
    name: '李医生',
    title: '副主任医师',
    avatar: '/static/doctor/expert2.jpg',
    hospital: '澳门科大医院',
    tags: ['专家门诊'],
    specialty: '糖尿病、内分泌疾病',
    schedule: {
      date: '明天',
      period: '下午 14:00-16:30',
      price: 300,
      available: false
    }
  }
])

// 筛选条件
const filter = ref({
  title: '',
  hospital: '',
  consultType: '',
  sort: 'default'
})

// 职称选项
const titles = [
  { value: 'chief', label: '主任医师' },
  { value: 'deputy', label: '副主任医师' },
  { value: 'attending', label: '主治医师' }
]

// 医院选项
const hospitals = [
  { value: 'jh', label: '镜湖医院' },
  { value: 'kd', label: '科大医院' }
]

// 问诊方式
const consultTypes = [
  { value: 'expert', label: '专家门诊' },
  { value: 'video', label: '视频问诊' },
  { value: 'phone', label: '电话问诊' }
]

// 排序选项
const sortOptions = [
  { value: 'default', label: '综合排序' },
  { value: 'rating', label: '评分最高' },
  { value: 'price', label: '价格排序' }
]

// 加载状态
const refreshing = ref(false)
const loadMoreStatus = ref('more')

// 搜索
const onSearch = (e) => {
  const value = e.detail.value.trim()
  // 这里处理搜索逻辑
}

// 选择科室
const selectDepartment = (department) => {
  currentDepartment.value = department.id
  // 这里加载对应科室的专家列表
}

// 查看医生详情
const viewDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/doctor/detail?id=${doctor.id}`
  })
}

// 显示筛选抽屉
const filterDrawer = ref(null)
const showFilter = () => {
  filterDrawer.value.open()
}

// 重置筛选
const resetFilter = () => {
  filter.value = {
    title: '',
    hospital: '',
    consultType: '',
    sort: 'default'
  }
}

// 选择职称
const selectTitle = (value) => {
  filter.value.title = value
}

// 选择医院
const selectHospital = (value) => {
  filter.value.hospital = value
}

// 选择问诊方式
const selectConsultType = (value) => {
  filter.value.consultType = value
}

// 选择排序方式
const selectSort = (value) => {
  filter.value.sort = value
}

// 应用筛选
const applyFilter = () => {
  filterDrawer.value.close()
  // 这里处理筛选逻辑
}

// 下拉刷新
const onRefresh = () => {
  // 这里处理刷新逻辑
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const loadMore = () => {
  if (loadMoreStatus.value !== 'more') return
  loadMoreStatus.value = 'loading'
  
  // 这里处理加载更多逻辑
  setTimeout(() => {
    loadMoreStatus.value = 'noMore'
  }, 1000)
}
</script>

<style lang="scss">
.expert-container {
  min-height: 100vh;
  background: $bg-color;
  
  .search-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    
    .search-box {
      flex: 1;
      height: 72rpx;
      background: $bg-color;
      border-radius: $radius-xl;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      margin-right: 20rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 12rpx;
      }
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }
    }
    
    .filter-btn {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: $text-regular;
      
      .iconfont {
        font-size: 32rpx;
        margin-right: 4rpx;
      }
    }
  }
  
  .department-bar {
    background: #fff;
    white-space: nowrap;
    padding: 20rpx;
    
    .department-item {
      display: inline-block;
      padding: 12rpx 30rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
      color: $text-regular;
      background: $bg-color;
      border-radius: $radius-lg;
      
      &.active {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  .expert-list {
    height: calc(100vh - 184rpx);
    padding: 20rpx;
    
    .expert-item {
      display: flex;
      padding: 30rpx;
      background: #fff;
      border-radius: $radius-lg;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .basic {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12rpx;
          
          .name-title {
            .name {
              font-size: 32rpx;
              color: $text-primary;
              font-weight: bold;
              margin-right: 12rpx;
            }
            
            .title {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
          
          .tags {
            text {
              display: inline-block;
              font-size: 22rpx;
              color: $primary-color;
              background: $primary-light;
              padding: 4rpx 12rpx;
              border-radius: $radius-sm;
              margin-left: 12rpx;
            }
          }
        }
        
        .hospital {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 12rpx;
        }
        
        .specialty {
          display: flex;
          margin-bottom: 16rpx;
          
          .label {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          .content {
            flex: 1;
            font-size: 26rpx;
            color: $text-primary;
          }
        }
        
        .schedule {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .time {
            .date {
              font-size: 26rpx;
              color: $success;
              margin-right: 12rpx;
            }
            
            .period {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
          
          .action {
            display: flex;
            align-items: center;
            
            .price {
              font-size: 32rpx;
              color: $warning;
              font-weight: bold;
              margin-right: 16rpx;
            }
            
            .status {
              font-size: 24rpx;
              color: $success;
              background: rgba($success, 0.1);
              padding: 4rpx 12rpx;
              border-radius: $radius-sm;
              
              &.full {
                color: $text-secondary;
                background: $bg-color;
              }
            }
          }
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .filter-drawer {
    height: 100%;
    background: #fff;
    padding: 30rpx;
    
    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .reset {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
    
    .filter-section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 30rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        text {
          font-size: 26rpx;
          color: $text-regular;
          background: $bg-color;
          padding: 12rpx 30rpx;
          border-radius: $radius-lg;
          
          &.active {
            color: #fff;
            background: $primary-gradient;
          }
        }
      }
      
      .sort-list {
        .sort-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 88rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: $text-regular;
          
          .iconfont {
            font-size: 32rpx;
            color: $primary-color;
            opacity: 0;
          }
          
          &.active {
            color: $primary-color;
            
            .iconfont {
              opacity: 1;
            }
          }
        }
      }
    }
    
    .drawer-footer {
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 30rpx;
      
      .confirm-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 30rpx;
        color: #fff;
        background: $primary-gradient;
        border-radius: $radius-xl;
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}
</style> 